<style>
    .ly-header-pop .ly-info-label {
        line-height: 19px;
        font-size: 13px;
        margin-bottom: 12px;
    }

    .ly-header-border{
        border-bottom: 1px solid #EFF2F6;
        margin-bottom: 10px;
    }
   .ly-header-title.ly-header-bold{
        font-weight: bold;
    }

    .ly-header-pop .ly-info-label-label {
        font-size: 14px;
        font-weight: 400;
        color: #111;
        line-height: 20px;
        display: block;
        margin-bottom: 2px;
    }

    .ly-header-pop .ly-info-label-content {
        font-size: 12px;
        font-weight: 400;
        color: #667586;
        line-height: 20px;
        display: block;
    }

    .ly-header-pop .ly-info-label-colon {
        display: none;
    }

</style>
<template>
    <div class="ly-header" :class="{'ly-header-border':border}">
                <span class="ly-header-title" :class="{'ly-header-bold':bold}">
                   <slot name="title">
                        {{title}}
                        <span class="description">{{description}}</span>
                       	<el-popover width="320" popper-class="ly-header-pop" placement="right" v-model="helpPop">
                             <slot name="popover"></slot>
                            <i slot="reference" v-show="help" class="el-icon-question"
                               style="color: #9DA9B6;margin-left: 10px;"></i>
                        </el-popover>
                   </slot>
                </span>
        <div class="ly-header-right link">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-panel-header',
            props: {
                description:String,
                title: String,
                bold:Boolean,
                border:Boolean
            },
            data: function () {
                return {
                    help: false,
                    helpPop: false
                }
            }
            , mounted: function () {
                this.help=this.$scopedSlots.popover!=null;
            },
            created: function () {

            }, methods: {}
        }
    });
</script>
